﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>keyboard events</title>

</head>
<body>
    <label>TextBox : </label><input id="textbox" type="text" size="50" />

    <div>
        <label>keydown() event fired : </label><span id="keydownCounter">0</span> times.
    </div>

    <div>
        <label>keypress() event fired : </label><span id="keypressCounter">0</span> times.
    </div>
</body>
</html>
<script src="Scripts/jquery-2.1.4.js"></script>
<script language="javascript">
    var keydownCounter = 0;
    var keypressCounter = 0;

    $(document).ready(function () {

        $('#textbox').keydown(function (event) {
            $('#keydownCounter').html(++keydownCounter);
        });

        $('#textbox').keypress(function (event) {
            $('#keypressCounter').html(++keypressCounter);
        });

    });

</script>